<!--
  @author: yangwenjun
  @Created by yangwenjun on 2022/02/14 21:36:59
  @file: index.html
  @description:
  ==================
  Usage:
  ```
  
  ```
  ==================
-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>index</title>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <button onclick="getData()">获取数据</button>

  <script>
    function getData() {
      const query = `
        query Account($username: String!, $city: String!) {
          account(username: $username) {
            name
            age
            sex
            department
            salary(city: $city)
          }
        }
      `

      const variables = {
        username: '李大四',
        city: '北京'
      }

      fetch('/graphql', {
        method: 'post',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify({
          query: query,
          variables: variables
        })
      }).then(res => res.json())
      .then(json => console.log(json))
    }
  </script>
</body>

</html>